<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线影院订票系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        .hero-section {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 5rem 0;
            text-align: center;
        }
        .hero-title {
            font-size: 3rem;
            font-weight: bold;
            margin-bottom: 1rem;
        }
        .hero-subtitle {
            font-size: 1.2rem;
            margin-bottom: 2rem;
            opacity: 0.9;
        }
        .btn-hero {
            background: rgba(255, 255, 255, 0.2);
            border: 2px solid white;
            color: white;
            padding: 12px 30px;
            border-radius: 50px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: all 0.3s ease;
        }
        .btn-hero:hover {
            background: white;
            color: #667eea;
            transform: translateY(-2px);
        }
        .feature-card {
            border: none;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            padding: 2rem;
            text-align: center;
            height: 100%;
            transition: transform 0.3s ease;
        }
        .feature-card:hover {
            transform: translateY(-5px);
        }
        .feature-icon {
            font-size: 3rem;
            color: #667eea;
            margin-bottom: 1rem;
        }
        .feature-title {
            font-size: 1.5rem;
            font-weight: bold;
            margin-bottom: 1rem;
            color: #333;
        }
        .feature-desc {
            color: #666;
            line-height: 1.6;
        }
        .stats-section {
            background: #f8f9fa;
            padding: 4rem 0;
        }
        .stat-item {
            text-align: center;
            padding: 2rem;
        }
        .stat-number {
            font-size: 3rem;
            font-weight: bold;
            color: #667eea;
            display: block;
        }
        .stat-label {
            color: #666;
            font-size: 1.1rem;
            margin-top: 0.5rem;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
        <div class="container">
            <a class="navbar-brand fw-bold text-primary" href="${pageContext.request.contextPath}/">
                <i class="fas fa-film me-2"></i>影院订票系统
            </a>
            
            <div class="navbar-nav ms-auto">
                <c:if test="${not empty sessionScope.user}">
                    <a class="nav-link" href="${pageContext.request.contextPath}/movies">
                        <i class="fas fa-film me-1"></i>电影
                    </a>
                    <div class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
                            <i class="fas fa-user me-1"></i>${sessionScope.user.username}
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="${pageContext.request.contextPath}/user/orders">
                                <i class="fas fa-ticket-alt me-2"></i>我的订单
                            </a></li>
                            <li><a class="dropdown-item" href="${pageContext.request.contextPath}/user/profile">
                                <i class="fas fa-user-edit me-2"></i>个人信息
                            </a></li>
                            <c:if test="${sessionScope.user.role == 'ADMIN'}">
                                <li><hr class="dropdown-divider"></li>
                                <li><a class="dropdown-item" href="${pageContext.request.contextPath}/admin/movies">
                                    <i class="fas fa-cog me-2"></i>管理后台
                                </a></li>
                            </c:if>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="${pageContext.request.contextPath}/logout">
                                <i class="fas fa-sign-out-alt me-2"></i>退出登录
                            </a></li>
                        </ul>
                    </div>
                </c:if>
                <c:if test="${empty sessionScope.user}">
                    <a class="nav-link" href="${pageContext.request.contextPath}/login">
                        <i class="fas fa-sign-in-alt me-1"></i>登录
                    </a>
                    <a class="nav-link" href="${pageContext.request.contextPath}/register">
                        <i class="fas fa-user-plus me-1"></i>注册
                    </a>
                </c:if>
            </div>
        </div>
    </nav>

    <!-- 英雄区域 -->
    <section class="hero-section">
        <div class="container">
            <h1 class="hero-title">
                <i class="fas fa-film me-3"></i>在线影院订票系统
            </h1>
            <p class="hero-subtitle">
                享受便捷的在线订票体验，精彩电影一键预订
            </p>
            <c:if test="${empty sessionScope.user}">
                <a href="${pageContext.request.contextPath}/register" class="btn btn-hero me-3">
                    <i class="fas fa-user-plus me-2"></i>立即注册
                </a>
                <a href="${pageContext.request.contextPath}/login" class="btn btn-hero">
                    <i class="fas fa-sign-in-alt me-2"></i>用户登录
                </a>
            </c:if>
            <c:if test="${not empty sessionScope.user}">
                <a href="${pageContext.request.contextPath}/movies" class="btn btn-hero">
                    <i class="fas fa-ticket-alt me-2"></i>开始订票
                </a>
            </c:if>
        </div>
    </section>

    <!-- 功能特色 -->
    <section class="py-5">
        <div class="container">
            <div class="row text-center mb-5">
                <div class="col-12">
                    <h2 class="fw-bold mb-3">为什么选择我们</h2>
                    <p class="text-muted">专业的在线订票平台，为您提供优质的观影体验</p>
                </div>
            </div>
            
            <div class="row">
                <div class="col-lg-4 col-md-6 mb-4">
                    <div class="feature-card">
                        <i class="fas fa-search feature-icon"></i>
                        <h4 class="feature-title">智能搜索</h4>
                        <p class="feature-desc">
                            支持多条件搜索，快速找到心仪的电影和场次，
                            包括影片名称、类型、影院位置、时间等多维度筛选
                        </p>
                    </div>
                </div>
                
                <div class="col-lg-4 col-md-6 mb-4">
                    <div class="feature-card">
                        <i class="fas fa-couch feature-icon"></i>
                        <h4 class="feature-title">座位选择</h4>
                        <p class="feature-desc">
                            可视化座位图，自由选择心仪座位，
                            支持系统智能分配和手动选择两种模式
                        </p>
                    </div>
                </div>
                
                <div class="col-lg-4 col-md-6 mb-4">
                    <div class="feature-card">
                        <i class="fas fa-mobile-alt feature-icon"></i>
                        <h4 class="feature-title">便捷支付</h4>
                        <p class="feature-desc">
                            支持多种支付方式，安全快捷的支付体验，
                            订单自动管理，支持退票改票服务
                        </p>
                    </div>
                </div>
                
                <div class="col-lg-4 col-md-6 mb-4">
                    <div class="feature-card">
                        <i class="fas fa-ticket-alt feature-icon"></i>
                        <h4 class="feature-title">订单管理</h4>
                        <p class="feature-desc">
                            完善的订单管理系统，实时查看订单状态，
                            支持订单查询、退票、改票等操作
                        </p>
                    </div>
                </div>
                
                <div class="col-lg-4 col-md-6 mb-4">
                    <div class="feature-card">
                        <i class="fas fa-clock feature-icon"></i>
                        <h4 class="feature-title">实时更新</h4>
                        <p class="feature-desc">
                            实时更新电影信息和场次安排，
                            确保您获得最新最准确的排片信息
                        </p>
                    </div>
                </div>
                
                <div class="col-lg-4 col-md-6 mb-4">
                    <div class="feature-card">
                        <i class="fas fa-headset feature-icon"></i>
                        <h4 class="feature-title">客户服务</h4>
                        <p class="feature-desc">
                            专业的客服团队，7×24小时在线服务，
                            为您解决订票过程中的任何问题
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 统计数据 -->
    <section class="stats-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-md-6">
                    <div class="stat-item">
                        <span class="stat-number">1000+</span>
                        <div class="stat-label">注册用户</div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="stat-item">
                        <span class="stat-number">50+</span>
                        <div class="stat-label">合作影院</div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="stat-item">
                        <span class="stat-number">200+</span>
                        <div class="stat-label">热映电影</div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="stat-item">
                        <span class="stat-number">10000+</span>
                        <div class="stat-label">成功订单</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-4">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <h5><i class="fas fa-film me-2"></i>在线影院订票系统</h5>
                    <p class="mb-0">为您提供便捷的在线订票服务</p>
                </div>
                <div class="col-md-6 text-md-end">
                    <p class="mb-0">© 2024 Cinema Booking System. All rights reserved.</p>
                </div>
            </div>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
